<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
</head>
<style>
    .list {
        width: 1210px;
        height: 48px;
        background-color: grey;
        margin:100px auto;

    }
    .list li{
        float: left;
       
        line-height: 49px;
        
        
    }
    .list li:hover{
background-color: chartreuse;
    }
    .list a{
        display: block;
        padding: 0 72px;
        color: black;
    }
    .list a:hover{
        color: cornsilk;
    }
    .list li:last-child a {
        padding: 0 78px;
    }
    
   
</style>

<body>
    <ul class="list">
        <li><a href="#">斗鱼</a></li>
        <li><a href="#">虎扑</a></li>
        <li><a href="#">抖音</a></li>
        <li><a href="#">NBA</a></li>
        <li><a href="#">吃吧</a></li>
        <li><a href="#">斗鱼</a></li>
        <li><a href="#">斗鱼</a></li>
    </ul>
</body>

</html>